<template>
  <div class="contain">
    <div class="box">
      <el-tabs v-model="activeName" stretch @tab-click="handleClick">
        <el-tab-pane label="全部订单" name="1" />
        <el-tab-pane label="待付款" name="2" />
        <el-tab-pane label="待发货" name="3" />
        <el-tab-pane label="待签收" name="4" />
        <el-tab-pane label="待评价" name="5" />
        <el-tab-pane label="待退款" name="6" />
        <el-tab-pane label="已完成" name="7" />
        <el-tab-pane label="已取消" name="8" />
      </el-tabs>
      <OrderSearch
        :options1="options1"
        :value="value"
      />
      <el-button
        type="
        primary"
        class="exportBtn"
      >批量导出</el-button>
      <Order />
    </div>

  </div>
</template>
<script>
export default {
  data() {
    return {
      activeName: '1',
      rotate: false,
      content: '',
      options1: [{
        value: '',
        label: '全部'
      }, {
        value: '选项1',
        label: '黄金糕'
      }],
      value: ''
    }
  },
  methods: {
    handleClick(tab, event) {
      console.log(tab, event)
    },
    moreSelect() {
      this.rotate = !this.rotate
    }
  }
}
</script>

<style lang='scss' scoped>
.contain{
  padding: 20px;
  margin-top: 50px;
  .box{
    height: 50px;
    line-height: 50px;
    .el-tabs{
      width: 1200px;
      padding:0 20px;
      box-shadow: 0 0 10px 10px rgba(223, 235, 252,0.5);
    }
  }
}
 ::v-deep.el-card__body{
    padding: 0;
  }
.el-tabs__nav-wrap::after {
    content: "";
    position: absolute;
    left: 0;
    bottom: 0;
    width: 100%;
    height: 2px;
    z-index: 1;
}

.exportBtn{
  background-color: #438dee;
  margin: 20px 0 10px 0;
}
</style>
